<template>
  <xdh-echarts :options="options"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  export default {
    components: {
      XdhEcharts
    },
    props: {
      xData: {
        type: Array
      },
      yData: {
        type: Array
      },
      isColor: {
        type: Boolean,
        default: true
      },
      colors: {
        type: String,
        default: 'rgba(25,175,244,1)'
      },
      toColors: {
        type: String,
        default: 'rgba(25,175,244,0.8)'
      },
      formColors: {
        type: String,
        default: 'rgba(25,175,244,0.2)'
      }
    },
    computed: {
      options() {
        let that = this;
        return {
          grid: {
            left: '3.5%',
            top: '10%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,0.8)',
                  interval: 0,
                  fontSize: '12'
                }
              },
              axisTick: {show: false},
              axisLine: {
                lineStyle: {
                  color: 'rgba(160,160,160,0.3)'
                }
              },
              boundaryGap: false,
              data: that.xData
            }
          ],
          yAxis: [
            {
              type: 'value',
              nameGap: '20',
              nameTextStyle: {
                color: '#ffffff',
                fontSize: '16'
              },
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,0.8)',
                  fontSize: '14'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#0F3D72'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#0F3D72'
                }
              }
            }
          ],
          series: [
            {
              type: 'line',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: that.colors,
                  areaStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: that.isColor ? that.toColors : 'rgba(0,0,0,0)'
                        },
                        {
                          offset: 1,
                          color: that.isColor ? that.formColors : 'rgba(0,0,0,0)'
                        }
                      ],
                      globalCoord: false
                    }
                  }
                }
              },
              data: that.yData
            }
          ]
        };
      }
    },
    data() {
      return {};
    }
  }
</script>
